<template>
    <div>
        <el-form-item label="商品类型" prop="type">
            <el-radio v-model="value.type" :label="1">商品</el-radio>
            <!-- <el-radio v-model="value.type" :label="2">服务</el-radio> -->
        </el-form-item>
        <el-form-item label="商品标题" prop="name_store">
            <el-input placeholder="请输入商品标题" v-model="value.name_store" clearable style="width: 575px" />
        </el-form-item>
        <el-form-item label="商品卖点描述" prop="sub_name">
            <el-input placeholder="请输入商品卖点描述" v-model="value.sub_name" clearable style="width: 575px" />
        </el-form-item>
        <el-form-item label="商品分类" prop="category_id">
            <el-select placeholder="请选择一级分类" @change="changeCateGory" v-model="cate_id">
                <el-option v-for="(item, index) in categoryLists" :key="index" :label="item.name" :value="item.id" />
            </el-select>
            <el-select
                placeholder="请选择二级分类"
                style="margin-left: 16px"
                @change="changeCateGoryResult"
                v-model="cate_id1"
            >
                <el-option v-for="(item, index) in categoryleve" :key="index" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="商品主图" prop="image">
            <material-select v-model="value.image" />
        </el-form-item>
        <el-form-item label="商品轮播图" prop="goods_image">
            <material-select v-model="value.goods_image" :limit="10" />
        </el-form-item>
        <el-form-item label="商品视频">
            <material-select type="video" v-model="value.video" />
        </el-form-item>
        <el-form-item label="所属品牌" prop="brand_id" v-if="value.type == 1">
            <el-select placeholder="请选择所属品牌" v-model="value.brand_id">
                <el-option v-for="(item, index) in brandList" :key="index" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="安装费" v-if="value.type == 1">
            <el-input placeholder="请输入安装费" v-model="value.install_fee" clearable />
        </el-form-item>
        <el-form-item label="折旧费" v-if="value.type == 1">
            <el-input placeholder="请输入折旧费" v-model="value.old_fee" clearable />
        </el-form-item>
        <el-form-item label="商品属性标签" prop="label">
            <el-radio v-model="value.label" label="1">维修</el-radio>
            <el-radio v-model="value.label" label="2">服务</el-radio>
            <el-radio v-model="value.label" label="3">换新</el-radio>
            <el-radio v-model="value.label" label="4">家政</el-radio>
        </el-form-item>
    </div>
</template>

<script>
import store from '@/store'
import { apiGoodsCategoryLists, apiGoodsBrandList } from '@/api/goods'
import MaterialSelect from '@/components/material-select/index.vue'
export default {
    components: {
        MaterialSelect
    },
    props: {
        value: {
            type: Object,
            required: true,
            default: {
                name: '', //商品标题
                sub_name: '', //商品副标题
                type: 1, //商品类型
                category_id: [],
                brand_id: '', //商品品牌
                image: '', //商品主图
                goods_image: [], //轮播图
                video: '', //商品视频
                install_fee: '', //安装费
                old_fee: '', //折旧费
                label: ''
            }
        }
    },
    data() {
        return {
            headers: {
                token: store.getters.token
            },
            categoryLists: [],
            categoryleve: [],
            brandList: [],
            cate_id: '',
            cate_id1: ''
        }
    },
    async created() {
        await apiGoodsCategoryLists({}).then(res => {
            this.categoryLists = res
        })
        await apiGoodsBrandList().then(res => {
            this.brandList = res
        })
        if (this.value.category_id.length) {
            this.cate_id = this.value.category_id[0]
            this.cate_id1 = this.value.category_id[1]
            this.changeCateGory(this.cate_id)
        }
    },
    methods: {
        changeCateGoryResult() {
            this.value.category_id = [this.cate_id, this.cate_id1]
        },
        changeCateGory(e) {
            const arry = this.categoryLists.filter(val => val.id == e)
            if (arry) {
                this.categoryleve = arry[0].child
            }
        },
        /**
         * handlePictureCardPreview 主图上传成功
         */
        handleAvatarSuccess({ data: { uri } }) {
            this.value.image = uri
        },
        /**
         * handlePictureCardPreview 上传轮播
         */
        handlePictureCardPreview({ data: { uri } }) {
            this.value.goods_image.push(uri)
        },
        /**
         * handleRemove 移除图片
         */
        handleRemove({
            response: {
                data: { uri }
            }
        }) {
            if (this.value.goods_image.indexOf(uri) !== -1) {
                this.value.goods_image.splice(this.value.goods_image.indexOf(uri), 1)
            }
        },
        /**
         * 上传视频
         */
        handleVideoSuccess({ data: { uri } }) {
            this.value.video = uri
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
}
.avatar {
    width: 148px;
    height: 148px;
    display: block;
}
</style>
